<template>
	<view class="main">
		<tou_hand1 handtitle='用户统计详情'></tou_hand1>
		<view class="show">
			<view class="tapthree">
				<view class="cdjl-0" v-if="value">
					<view class="cdjl-0-l" @click="onShowDatePicker('range')">
						{{value[0]}}
					</view>-
					<view class="cdjl-0-l" @click="onShowDatePicker('range')">
						{{value[1]}}
					</view>
				</view>
				<van-collapse v-model="activeNames">
					<van-cell v-for="(item, index) in blist" :key="index" >
							<view class="taplist">
								<view>
									<view class="tphand">用户编号：{{item.account}}</view>
									<view class="tpfoot">{{item.createTime}}</view>
								</view>
								<view class="tapmoney">账户余额¥{{item.realBalance}}</view>
							</view>
						<view class="showtap">
							<view class="stone">
								<view class="stoneleft">用户手机：{{item.phone}}</view>
								<view class="stoneleft">微信昵称：{{item.weName}}</view>
								<view class="stoneleft">赠送金额：¥{{item.dummyBalance}}</view>
								<view class="stoneleft">关注时间：¥{{item.createTime}}</view>
							</view>
						</view>
					
					</van-cell>
				</van-collapse>
			</view>
		</view>
		<date-picker :show="showPicker" :type="type" class="mask" :value="value" :show-tips="true" :begin-text="'开始'"
		 :end-text="'结束'" :show-seconds="true" @confirm="onSelected" @cancel="onCancel"></date-picker>	
	</view>
</template>

<script>
	import tou_hand1 from '../../components/tou_hand1/tou_hand1.vue'
	import datePicker from "../../components/mx-datepicker.vue";
	import {formatDate} from '../../common/formatDate.js'
	export default {
		components: {tou_hand1,datePicker},
		mounted() {
			
		},

		data() {
			return {
				active: '',
				activeNames: [''], //当前展开面板的 name
				value: ['请选择开始时间', '请选择结束时间'],
				type: 'range', //时间选择器
				showPicker: false, //时间选择器
				blist:[],//本区消费数据
				loading: false,
				finished: false,
				refreshing: false,
				pageNum: 1, //页码
				pageSize: 10, //每页显示的条数
			}
		},
		onLoad(option) {
			this.projectId=option.projectId
			this.show();
			this.loadMore();
		},
		methods: {
			show(){
				var nowtime = formatDate(new Date(),'yyyy-MM-dd');				
				var oldtime=formatDate(new Date(new Date().getTime()-2592000000),'yyyy-MM-dd');
				this.value=[oldtime,nowtime]
			},
			// 用户统计详情分页
			loadMore() {
				if (this.refreshing) {
				  this.blist = [];
				  this.refreshing = false;
				}
				const that = this;
				let data = {
					projectIds:this.projectId,
					pageNum:that.pageNum,
					pageSize:that.pageSize,
					startTime:that.value[0],
					endTime:that.value[1]
				}
				that.loading = true;
				that.$base.request1('manager/statistic/user/list', 'GET', data)
					.then(res => {
						that.loading = false;
						if(res.data.rows&&res.data.rows.length>0){
							that.blist = that.blist.concat(res.data.rows);
							that.pageNum += 1;
						}else{
							that.finished = true;
						}
					})
					.catch(err => {
				
					})
			},
			 onRefresh() {
			      // 清空列表数据
			      this.finished = false;
				  this.pageNum=1
			      // 重新加载数据
			      // 将 loading 设置为 true，表示处于加载状态
			      this.loading = true;
			      this.loadMore();
			    },
			//选择时间点击确定
			onSelected(e) { //选择
				this.showPicker = false;
				if (e) {
					this[this.type] = e.value;
					for(var i=0;i<e.value.length;i++){
						e.value[i]=formatDate(new Date(e.value[i]),'yyyy-MM-dd')
					}
					this.value = e.value;
					
						this.blist = [];
						this.onRefresh()
					
				}
			},
			//选择时间点击取消
			onCancel() {
				this.showPicker = false;
				var nowtime = formatDate(new Date(),'yyyy-MM-dd');
				var oldtime=formatDate(new Date(new Date().getTime()-2592000000),'yyyy-MM-dd');
				this.value=[oldtime,nowtime]
				this.blist = [];
				this.onRefresh()
				
			},
			//点击时间框选择时间
			onShowDatePicker(type) { //显示
				this.type = type;
				this.showPicker = true;
				this.value = this[type];
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;
		// overflow-x: hidden;
		background-color: #F5F5F5;
		/deep/.van-list__finished-text{
			margin-top: 100upx;
			padding-bottom: 200upx;
		}
		/deep/.van-hairline--top-bottom::after{
			border-width: 0;
		}
		.show{
			padding: 0 20upx;
			/deep/.van-tab {
				font-size: 32upx;
				font-family: PingFang SC Bold, PingFang SC Bold-Bold;
				font-weight: 700;
				color: #999999;
			}
			
			/deep/.van-tab--active {
				font-size: 32upx;
				font-family: PingFang SC Bold, PingFang SC Bold-Bold;
				font-weight: 700;
				color: #4b98ed;
			}
			
			/deep/.van-tabs__line {
				width: 210upx !important;
				height: 4upx;
				border-radius: 2px;
				background-color: #4B98ED;
			}
			
			.tapthree {
				// margin: 16upx 0;
				// padding-bottom: 40upx;
				.taplist{
					display: flex;
					justify-content: space-between;
					align-items: center;
					.tphand {
						font-size: 28upx;
						font-family: PingFang SC Bold, PingFang SC Bold-Bold;
						font-weight: 700;
						color: #333333;
					}
								
					.tpfoot {
						font-size: 24upx;
						font-family: PingFang SC Medium, PingFang SC Medium-Medium;
						font-weight: 500;
						color: #333333;
						margin-top: 10upx;
					}
					.tapmoney{
						font-size: 28upx;
						font-family: PingFang SC Bold, PingFang SC Bold-Bold;
						font-weight: 700;
						color: #4b98ed;
					}
				}
				.cdjl-0 {
					display: flex;
					height: 100upx;
					background: #fff;
					align-items: center;
					justify-content: space-around;
					margin-bottom: 25upx;
					.cdjl-0-l {
						height: 60upx;
						width: 260upx;
						border-radius: 10upx;
						border: 2upx solid #ccc;
						font-size: 30upx;
						line-height: 60upx;
						color: #bbbbbb;
						text-align: center;
					}
				
					.cdjl-0-r {
						width: 120upx;
						height: 60upx;
						font-size: 20upx;
						background: #4e9ff6;
						color: #fff;
						line-height: 60upx;
						text-align: center;
						border-radius: 10upx;
					}
				}
			
				/deep/.van-collapse {
					background-color: #F5F5F5;
				}
			
				/deep/.van-collapse-item {
					margin-top: 22upx;
				}
			
				/deep/.van-collapse-item__content {
					padding: 0 30upx;
				}
			
				/deep/.van-cell {
					align-items: center;
					padding: 10upx 20upx;
					margin-bottom: 10upx;
				}
				/deep/.van-cell:not(:last-child)::after{
					border-bottom: 0upx solid;
					
				}
			
				.showtap {
					width: 100%;
					box-sizing: border-box;
					padding: 21upx 0;
					.stone{
						box-sizing: border-box;
						width: 100%;
						padding: 0 30upx;
						.stoneleft{
							font-size: 24upx;
							font-family: PingFang SC Medium, PingFang SC Medium-Medium;
							font-weight: 500;
							color: #666666;
							margin-bottom: 15upx;
						}
					}
				}
			
			}
			.vshand{
				width: 100%;
				display: flex;
				justify-content: center;
				box-sizing: border-box;
				align-items: center;
				margin-top: 46upx;
				input{
					width: 250upx;
					height: 64upx;
					font-size: 28upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					color: #999999;
					border: 1upx solid #d2d2d2;
					padding-left:30upx ;
					box-sizing: border-box;
					border-radius: 8upx;
				}
				.vstxt{
					width: 32upx;
					height: 2upx;
					background-color: #313131;
					margin:0 10upx;
				}
				.vsbtn{
					width: 77upx;
					height: 64upx;
					border-radius: 10upx;
					font-size: 24upx;
					font-family: PingFang SC Bold, PingFang SC Bold-Bold;
					font-weight: 700;
					text-align: center;
					line-height: 64upx;
					background-color: #4B98ED;
					color: #ffffff;
					margin-left: 39upx;
				}
			}
		}
		
	}
</style>
